<template>
  <el-menu
    active-text-color="#4bf3ff"
    background-color="#0066ff"
    class="el-menu-vertical-demo"
    text-color="#fff"
    router
    :unique-opened="true"
    @select="clicknav"
  >
    <template v-for="item in navlist">
      <el-sub-menu v-if="item.children" key="item.id" :index="item.id">
        <template #title>
          <el-icon v-html="item.icon"></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item v-for="v in item.children" :index="v.path" key="v.id">
          <el-icon size="14px"><ArrowRight /></el-icon>
          <span>{{ v.name }}</span></el-menu-item
        >
      </el-sub-menu>
      <el-menu-item v-else :index="item.path">
        <el-icon v-html="item.icon"></el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useStore } from "vuex";
export default {
  props: {},
  setup(props, context) {
    const { state } = useStore();
    const navlist = computed(() => state.navList);
    const clicknav = (index, indexPath) => {};
    return {
      navlist,
      clicknav,
    };
  },
};
</script>
<style lang="scss" scoped>
.el-menu {
  width: 100%;
  border: none;
  .el-menu-item {
    padding-left: 40px;
  }
}
</style>
